<template>
  <div class="content">
    <!-- 添加船舶/查询 -->
    <el-card class="box-card head-card">
      <el-button type="primary" @click="clickAddShip">添加船舶</el-button>
    </el-card>

    <!-- 船舶列表 -->
    <el-card class="box-card">
      <el-table :data="shipMessage" style="width: 100%">
        <el-table-column prop="deptName" label="船舶名称" />
        <el-table-column prop="mmsi" label="船舶MMSI" />
        <el-table-column prop="nmmsi" label="船舶NMMSI" />
        <el-table-column prop="owner" label="船东名称" />
        <el-table-column prop="shipName" label="船长姓名" />
        <el-table-column prop="shipPhone" label="船长电话" />
        <el-table-column fixed="right" label="操作" width="140">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
            <el-button type="text" @click="clickEditingShip(scope.row)" size="small">编辑</el-button>
            <el-popconfirm title="确认删除此账号吗？" @confirm="clickDeleteShip(scope.row)">
              <el-button type="text" style="margin-left: 10px" slot="reference" size="small">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 分页 -->
    <el-card class="box-card pagination-card" v-if="totalNum > 10">
      <el-pagination background layout="prev, pager, next" :current-page.sync="currentPage" :page-size="count"
        :total="totalNum" @current-change="handleCurrentChange">
      </el-pagination>
    </el-card>

    <!-- 查看船舶 -->
    <el-dialog title="船舶信息" :visible.sync="shipMessageShow" width="70%">
      <div class="popup-content">
        <div class="popup-title">船公司信息</div>
        <div class="popup-box">
          <div class="popup-item">
            <span style="color: #000">管理公司：</span>{{ shipMessageObj.pcompany || "--" }}
          </div>
          <div class="popup-item">
            <span style="color: #000">管理公司地址：</span>{{ shipMessageObj.pcompanyAddress || "--" }}
          </div>
          <div class="popup-item">
            <span style="color: #000">管理公司联系人：</span>{{ shipMessageObj.pcontact || "--" }}
          </div>
          <div class="popup-item">
            <span style="color: #000">联系人电话：</span>{{ shipMessageObj.pcontactPhone || "--" }}
          </div>
          <div class="popup-item">
            <span style="color: #000">联系人地址：</span>{{ shipMessageObj.pcontactAddress || "--" }}
          </div>
          <div class="popup-item">
            <span style="color: #000">联系人传真：</span>{{ shipMessageObj.pcontactFax || "--" }}
          </div>
          <div class="popup-item">
            <span style="color: #000">联系人邮箱：</span>{{ shipMessageObj.pcontactEmail || "--" }}
          </div>
          <div class="popup-item">
            <span style="color: #000">联系人备注：</span>{{ shipMessageObj.pcontactRemark || "--" }}
          </div>
        </div>
      </div>
      <div class="popup-content">
        <div class="popup-title">船东信息</div>
        <div class="popup-box">
          <div class="popup-item">
            <span style="color: #000">船东名称：</span>{{ shipMessageObj.owner || "--" }}
          </div>
          <div class="popup-item">
            <span style="color: #000">船东具体地址：</span>{{ shipMessageObj.ownerAddress || "--" }}
          </div>
          <div class="popup-item">
            <span style="color: #000">联系人姓名：</span>{{ shipMessageObj.ownerContact || "--" }}
          </div>
          <div class="popup-item">
            <span style="color: #000">联系人电话</span>{{ shipMessageObj.ownerContactPhone || "--" }}
          </div>
          <div class="popup-item">
            <span style="color: #000">联系人地址：</span>{{ shipMessageObj.ownerContactAddress || "--" }}
          </div>
          <div class="popup-item">
            <span style="color: #000">联系人传真：</span>{{ shipMessageObj.ownerContactFax || "--" }}
          </div>
          <div class="popup-item">
            <span style="color: #000">联系人邮箱：</span>{{ shipMessageObj.ownerContactEmail || "--" }}
          </div>
          <div class="popup-item">
            <span style="color: #000">联系人备注：</span>{{ shipMessageObj.ownerContactRemark || "--" }}
          </div>
        </div>
      </div>
      <div class="popup-content">
        <div class="popup-title">船舶信息</div>
        <div class="popup-box">
          <div class="popup-item">
            <span style="color: #000">船舶名称：</span>{{ shipMessageObj.deptName || "--" }}
          </div>
          <div class="popup-item">
            <span style="color: #000">船舶状态：</span>{{ shipMessageObj.status == 0 ? "启用" : "禁用" }}
          </div>
          <div class="popup-item">
            <span style="color: #000">Ai识别Id：</span>{{ shipMessageObj.boxId || "--" }}
          </div>
          <div class="popup-item">
            <span style="color: #000">船舶MMSI：</span>{{ shipMessageObj.mmsi || "--" }}
          </div>
          <div class="popup-item">
            <span style="color: #000">船舶NMMSI：</span>{{ shipMessageObj.nmmsi || "--" }}
          </div>
          <div class="popup-item">
            <span style="color: #000">船舶IMO号：</span>{{ shipMessageObj.imo || "--" }}
          </div>
          <div class="popup-item">
            <span style="color: #000">船长名称：</span>{{ shipMessageObj.shipName || "--" }}
          </div>
          <div class="popup-item">
            <span style="color: #000">船长电话：</span>{{ shipMessageObj.shipPhone || "--" }}
          </div>
          <div class="popup-item">
            <span style="color: #000">船旗国：</span>{{ shipMessageObj.country || "--" }}
          </div>
          <div class="popup-item">
            <span style="color: #000">船籍港：</span>{{ shipMessageObj.port || "--" }}
          </div>
          <div class="popup-item">
            <span style="color: #000">备注：</span>{{ shipMessageObj.remark || "--" }}
          </div>
        </div>
      </div>
      <div class="popup-content">
        <div class="popup-title">船舶AIS状态</div>
        <div class="popup-box">
          <div class="popup-item">
            <span style="color: #000">设备号：</span>{{ aisMessage.nmmsi || "--" }}
          </div>
          <div class="popup-item">
            <span style="color: #000">设备状态：</span>{{
            aisMessage.online==0?'离线':aisMessage.online==1?'在线':aisMessage.online==-1?'异常': "--" }}
          </div>
          <div class="popup-item">
            <span style="color: #000">船向：</span>{{ aisMessage.headingDegrees || "--" }}
          </div>
          <div class="popup-item">
            <span style="color: #000">船速：</span>{{ aisMessage.speedKnots || "--" }}
          </div>
          <div class="popup-item">
            <span style="color: #000">经度：</span>{{ aisMessage.longitude || "--" }}
          </div>
          <div class="popup-item">
            <span style="color: #000">纬度：</span>{{ aisMessage.latitude || "--" }}
          </div>
        </div>
      </div>
      <div class="image-content">
        <img :src="domain + shipMessageObj.fileUrl" alt="" />
      </div>
    </el-dialog>

    <!-- 添加船舶 -->
    <addShipMessage ref="shipMessage" @fatherMethod="fatherMethod" />
  </div>
</template>

<script>
  import uiHeader from "../layout/UiHeader.vue";
  import addShipMessage from "./common/addShipMessage.vue";

  export default {
    name: "shipManagement",
    components: {
      uiHeader,
      addShipMessage,
    },
    data() {
      return {
        domain: JSON.parse(localStorage.getItem("userInfo")).domain,
        totalNum: 0,
        shipMessageObj: {},
        shipMessageShow: false,
        shipMessage: [],
        ownerList: [],
        currentPage: 1,
        editUser: JSON.parse(localStorage.getItem("userInfo")),
        count: 10,
        aisMessage: {}
      };
    },
    mounted() {
      this.shipListMessage();
    },
    methods: {
      fatherMethod() {
        this.shipListMessage();
      },
      clickAddShip() {
        const shipMessage = {
          kind: "1",
          deptName: "",
          parentName: "",
          status: "",
          boxId: "",
          enName: "",
          country: "",
          port: "",
          imo: "",
          identification: "",
          name: "",
          company: "",
          deptName: "",
          companyAddress: "",
          contact: "",
          contactPhone: "",
          contactAddress: "",
          contactFax: "",
          contactEmail: "",
          contactRemark: "",
          owner: "",
          ownerAddress: "",
          ownerContact: "",
          ownerContactPhone: "",
          ownerContactAddress: "",
          ownerContactFax: "",
          ownerContactEmail: "",
          ownerContactRemark: "",
        };
        if (this.editUser.role.id != 1) {
          shipMessage.companyId = this.editUser.department.id;
          shipMessage.companyName = this.editUser.department.company;
        }

        this.$refs.shipMessage.shipModelMessage = shipMessage;
        this.$refs.shipMessage.dialogImageUrl = "";
        this.$refs.shipMessage.selectedFile = "";
        this.$refs.shipMessage.shipType = "0";

        this.$refs.shipMessage.shipShow = true;
        this.$refs.shipMessage.editing = false;
      },
      shipListMessage() {
        const that = this;
        that
          .$axios({
            method: "get",
            url: `/api/department/dept/ships`,
            params: {
              page: that.currentPage,
              count: that.count,
              kinds: 1,
            },
          })
          .then(function (res) {
            if (res.data.code == 0) {
              that.totalNum = res.data.data.total;
              that.shipMessage = res.data.data.list;
              return;
            }
            that.$message.error(that.data.msg);
            console.log(res);
          });
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        this.shipListMessage();
      },
      clickDeleteShip(item) {
        const that = this;
        that
          .$axios({
            method: "get",
            url: `/api/department/del-by-id?id=` + item.id,
          })
          .then((res) => {
            if (res.data.code == 0) {
              that.$message.success("删除成功");
              that.shipListMessage();
            }
          })
          .catch((error) => {
            console.log(error);
          });
      },
      clickEditingShip(item) {
        const that = this;
        that
          .$axios({
            method: "get",
            url: `/api/department/get-by-id?id=` + item.id,
          })
          .then((res) => {
            if (res.data.code == 0) {
              res.data.data.status = res.data.data.status == 0 ? "启用" : "禁用";
              res.data.data.ownerIds = res.data.data.ownerId;
              res.data.data.ownerId = res.data.data.owner;
              let shipModelMessage = res.data.data;

              that.$refs.shipMessage.shipShow = true;
              that.$refs.shipMessage.editing = true;
              that.$refs.shipMessage.shipType = 1;
              that.$refs.shipMessage.dialogImageUrl = "";
              that.$refs.shipMessage.selectedFile = "";
              that.$refs.shipMessage.shipModelMessage = [];
              that.$refs.shipMessage.shipModelMessage = shipModelMessage;
              return;
            }
            that.$message.error(that.data.msg);
          });
      },
      handleClick(item) {
        const that = this;
        that
          .$axios({
            method: "get",
            url: `/api/message/get-ship-ais?deptId=` + item.id,
          })
          .then((res) => {
            if (res.data.code == 0) {
              that.aisMessage = res.data.data;
            }
          });


        that
          .$axios({
            method: "get",
            url: `/api/department/get-by-id?id=` + item.id,
          })
          .then((res) => {
            if (res.data.code == 0) {
              that.shipMessageShow = true;
              this.shipMessageObj = res.data.data;
              return;
            }
            that.$message.error(that.data.msg);
          });
      },
    },
  };
</script>
<style>
  .image-content {
    width: 96%;
    overflow: hidden;
    margin: 0 auto;
    border-radius: 12px;
  }

  .image-content img {
    width: 100%;
    height: auto;
  }

  .pagination-card {
    text-align: right;
  }

  .popup-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0 20px;
  }

  .popup-content .popup-item {
    width: 45%;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 14px;
    color: #666;
  }

  .popup-content .popup-item span {
    font-size: 15px;
    font-weight: bold;
    width: 120px;
    text-align: right;
  }

  .popup-content .popup-title {
    /* width: 100%; */
    text-align: left;
    margin: 0 0 10px 0;
    padding: 0 10px;
    margin-left: 12px;
    background-color: #fff;
    position: relative;
    font-size: 16px;
  }

  .popup-box {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 20px 20px 0 20px;
    border-radius: 12px;
    margin: -20px 0 10px;
    border: 1px solid #999;
  }

  .content {
    width: 100%;
  }

  .head-card {
    display: flex;
  }

  .box-card {
    width: 100%;
    margin-top: 20px;
  }
</style>
